<template>
  <div class="sosd-container">
    <h1 class="sosd-title" :class="{ 'fade-in': isTitleShow }">SOSD博客管理平台</h1>
    <button class="enter-btn" 
      :class="{'fade-in': isBtnShow}"
      @click="handleEnter"
    >点我进入</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'

const isTitleShow = ref(false);
const isBtnShow = ref(false);
const router = useRouter();

onMounted(() => {
  setTimeout(() => {
    isTitleShow.value = true;
    setTimeout(() => {
      isBtnShow.value = true;
    }, 800);
  }, 500);
});


const handleEnter = () => {
  router.push('/login');
};
</script>

<style scoped>
@import url('./FirstPage.css');
</style>